

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { changeCity, changeCount, changeDataTestAsync, changeNum, countAdd, countDesc, deleteFlag, getMvList } from './../actions/index';

// @connect 装饰器 只能和class 类组件一起使用     必须直接写在class 组件前面  把装饰器里面的方法混入给UI组件 
// @withRouter     
// @obverser    
@connect(
    // mapStateToProps 输入逻辑 父改子
    state=>{
        console.log(state)
        return {
            count:state.get('count'),
            data:state.get('data'),
            city:state.getIn(['data','city']),
            mv:state.getIn(['data','mv']),
            test:state.getIn(['data','test']),
            num:state.getIn(['data','num']),
            flag:state.getIn(['data','flag'])
            // ...state,
            // count:state.count,
            // data:state.data 
        }
    },
    // mapDispatchToProps  输出逻辑 子改父 
    dispatch=>{
        return {
            countAdd:()=>dispatch(countAdd),
            countDesc:()=>dispatch(countDesc),
            changeCount:n=>dispatch(changeCount(n)),
            changeCity:city=>dispatch(changeCity(city)),
            changeDataTestAsync:()=>dispatch(changeDataTestAsync()),
            getMvList:()=>dispatch(getMvList()),
            changeNum:(num)=>dispatch(changeNum(num)),
            deleteFlag:()=>dispatch(deleteFlag),
        }
    }
)
class Counter extends Component {
    render() {
        console.log(this)
        // props dispatch => store.dispatch 
        const { 
            count  ,
            dispatch,
            data,
            mv,
            test,
            flag,
            city,
            num,
            countAdd,
            countDesc,
            changeCount,
            changeCity,
            changeDataTestAsync,
            getMvList,
            changeNum,
            deleteFlag
            } = this.props 
        return (
            <div>
               {
                   flag && <div>
                <h2>react-redux 实现简易的计数器 - 2 - two   </h2>
                <h2>count --- {count} </h2>
                <h2>test --- {test} </h2>
                <h2>city --- {city } </h2>
                <h2>num --- {num } --{data.get('num')}</h2>
                   </div>
               }
                <hr/>
                <button onClick={countAdd}> count Add </button>
                <button onClick={countDesc}> count desc  </button>
                <button onClick={()=>changeCount(200)}> changeCount 200   </button>
                <button onClick={()=>changeCity('想去上海旅游')}> 想去上海旅游    </button>
                <button onClick={changeDataTestAsync}> get test     </button>
                <button onClick={getMvList}> get movie      </button>
                <button onClick={()=>changeNum(1)}> get num     </button>
                <button onClick={deleteFlag}> 删除  flag  </button>

            
                {
                    mv.map((l,i)=>{
                        return (
                            <p key={i}> {l.title }</p>
                        )
                    })
                }
            </div>
        );
    }
}

export default Counter 

// // 输入逻辑   mapStateToProps   父组件把state 映射给 子组件   (把容器组件的state 分发给UI组件)   父改子
// // mapStateToProps会订阅 Store，每当state更新的时候，就会自动执行，重新计算 UI 组件的参数，从而触发 UI 组件的重新渲染  store
// const mapStateToProps = (state)=>{  // state get from Provider (context)  store.getState 
//     console.log(state)
//     return {
//         count:state.count,
//         data:state.data,
//         ...state 
//     }
// }
// // 输出逻辑   输出逻辑：用户发出的动作如何变为 Action 对象，从 UI 组件传出去   子改父 
// const mapDispatchToProps = (dispatch)=>{   // store.dispatch 
//     return {
//         countAdd:()=>dispatch(countAdd),
//         countDesc:()=>dispatch(countDesc),
//         changeCount:n=>dispatch(changeCount(n)),
//         changeCity:city=>dispatch(changeCity(city)),
//         changeDataTestAsync:()=>dispatch(changeDataTestAsync()),
//         getMvList:()=>dispatch(getMvList())
//     }
// }

// // class 组件
// // 纯函数 组件
// // 高阶   组件
// export default connect(mapStateToProps,  mapDispatchToProps )(Counter);    // 容器
